﻿
@{
    ViewData["Title"] = "后台管理";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
@section Styles
    {
    <style type="text/css">
       
        #mydata {
            height: 300px;
        }
        .el-card__header {
            padding: 10px 20px !important;
        }
        .el-card__body {
            padding: 10px !important;
        }
    </style>
}
@*<div id="mydata"></div>*@
<div id="mydata">
</div>
<div id="app" v-clock>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <i class="el-icon-shopping-cart-2"></i> <span style="font-weight: bolder;">订单汇总</span>
        </div>
        <div>
            <template>
                <el-table ref="singleTable"   size="mini" v-bind:data="sellData"  style="width: 100%">
                    <el-table-column label="订单状态" width="150">
                        <template scope="p">
                            <el-tag v-if="p.row.orderStatus===0" type="warning" size="mini">待处理</el-tag>
                            <el-tag v-if="p.row.orderStatus===1"  size="mini">处理中</el-tag>
                            <el-tag v-if="p.row.orderStatus===2" type="danger"  size="mini">已取消</el-tag>
                            <el-tag v-if="p.row.orderStatus===3" type="success"  size="mini">已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column property="toDay" label="今日" ></el-table-column>
                    <el-table-column property="toWeek" label="本周" ></el-table-column>
                    <el-table-column property="toMounth" label="本月" ></el-table-column>
                    <el-table-column property="toYear" label="今年" ></el-table-column>
                    <el-table-column property="toAll" label="全部" ></el-table-column>
                </el-table>
            </template>
        </div>
    </el-card>
    <el-row :gutter="2">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <i class="el-icon-star-on"></i> <span style="font-weight: bolder;">销售量最好的商品【前5】</span>
                </div>
                <div>
                    <template>
                        <el-table ref="singleTable"   size="mini" v-bind:data="sellMost"  style="width: 100%">
                            <el-table-column property="productName" label="产品名称" ></el-table-column>
                            <el-table-column property="total" label="总数" width="120"  ></el-table-column>
                            <el-table-column property="totalMoney" label="总金额（不含税）" width="180"></el-table-column> 
                        </el-table>
                    </template>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <i class="el-icon-star-off"></i> <span style="font-weight: bolder;">销售额最多的商品【前5】</span>
                </div>
                <div>
                    <template>
                        <el-table ref="singleTable"   size="mini" v-bind:data="sellMostMoney"  style="width: 100%">
                            <el-table-column property="productName" label="产品名称" ></el-table-column>
                            <el-table-column property="total" label="总数" width="120" ></el-table-column>
                            <el-table-column property="totalMoney" label="总金额（不含税）" width="180" ></el-table-column> 
                        </el-table>
                    </template>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>

@section Scripts
{
    <script type="text/javascript" src="~/lib/echarts/echarts.min.js"></script>
    <script>
        var dom = document.getElementById("mydata");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        option = {
            title: {
                text: '订单数统计 '
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    //saveAsImage: {}
                
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '销售',
                    type: 'line',
                    stack: '总量',
                    data: [32, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '退货',
                    type: 'line',
                    stack: '总量',
                    data: [10, 5, 22, 15, 20, 12, 3]
                } //,
                //{
                //    name:'视频广告',
                //    type:'line',
                //    stack: '总量',
                //    data:[150, 232, 201, 154, 190, 330, 410]
                //},
                //{
                //    name:'直接访问',
                //    type:'line',
                //    stack: '总量',
                //    data:[320, 332, 301, 334, 390, 330, 320]
                //},
                //{
                //    name:'搜索引擎',
                //    type:'line',
                //    stack: '总量',
                //    data:[820, 932, 901, 934, 1290, 1330, 1320]
                //}
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        new Vue({
            el: "#app",
            data: function() {
                return {
                    sellData: [
                        { orderStatus: 0, toDay: 0, toWeek: 0, toMounth: 0, toYear: 0, toAll: 120 },
                        { orderStatus: 1, toDay: 0, toWeek: 0, toMounth: 0, toYear: 0, toAll: 120 },
                        { orderStatus: 2, toDay: 0, toWeek: 0, toMounth: 0, toYear: 0, toAll: 120 },
                        { orderStatus: 3, toDay: 0, toWeek: 0, toMounth: 0, toYear: 0, toAll: 120 },
                    ],
                    sellMost: [
                        { productName: '英国Sleek 12色矿物眼影盘658 568 578 大地色盘哑光珠光眼彩盘', total: 2265, totalMoney: 200191.00},
                        { productName: '英国Sleek 12色矿物眼影盘658 895 450 大地色哑光珠光 带刷子', total: 1727, totalMoney: 153556.00},
                        { productName: 'Sleek12色矿物眼影盘568', total: 1443, totalMoney: 79204.00},
                        { productName: 'MartiDerm夜间焕肤精华Alfa Peeling20ML嫩肤去角质安瓶', total: 1439, totalMoney: 204160.00},
                        { productName: '英国Sleek 12色矿物眼影盘658 895 450 大地色哑光珠光 带刷子', total: 1380, totalMoney: 105359.00}
                    ],
                    sellMostMoney: [
                        { productName: 'MartiDERM新活亮肤安瓶精华60ML 淡化色斑 匀净澄白', total: 6180, totalMoney: 2644736.00 },
                        { productName: 'MartiDERM夜间焕肤精华Alfa Peeling60ML 柔滑瑕疵夜用修护安瓶', total: 675, totalMoney: 227056.00 },
                        { productName: 'MartiDERM安瓶小套组共10ML 保湿紧致提亮肤色', total: 4295, totalMoney: 209480.00 },
                        { productName: 'MartiDerm夜间焕肤精华Alfa Peeling20ML嫩肤去角质安瓶', total: 1439, totalMoney: 204160.00 },
                        { productName: '英国Sleek 12色矿物眼影盘658 568 578 大地色盘哑光珠光眼彩盘', total: 2265, totalMoney: 200191.00 }
                    ]
                }
            },
            created: function() {},
            mounted: function() {},
            update: function() {},
            watch: {},
            methods: {
            },
            computed: {},
            components: {}
        });
    </script>
}
